<script setup lang="ts">
import axios from 'axios';
import { onMounted, ref } from 'vue';

const props = defineProps<{
  channelID: number
}>()

defineEmits<{
  (e: 'changeChannelID', channelID: number): void
}>()

// 频道对象
type ChannelItem = {
  id: number;
  name: string;
};

// 频道接口响应数据
type ChannelResData = {
  data: {
    channels: ChannelItem[];
  };
  message: string;
};

const list = ref<ChannelItem[]>([])

onMounted(async () => {
  const res = await axios.get<ChannelResData>('http://geek.itheima.net/v1_0/channels')
  list.value = res.data.data.channels
})
</script>

<template>
  <div class="channel-nav">
    <nav class="list">
      <a
        class="item"
        :class="{ active: item.id === channelID }"
        href="javascript:;"
        v-for="(item, i) in list"
        :key="item.id"
        @click="$emit('changeChannelID', item.id)"
      >
      {{ item.name }}
      </a>
    </nav>
  </div>
</template>